import React from 'react'
import { changeNav,getServiceinfo,getArea,
	getProvince,modifyServicer,getCity,getRegion } from '../../actions'
import { connect } from 'react-redux'
import { List,WhiteSpace,Picker } from 'antd-mobile'
import hhistory from '../../history'

const Item = List.Item
const Brief = Item.Brief

class CompanyInfo extends React.Component {

	constructor( props ){
		super( props )

		this.state = {
			city:[],
			cityName:"",
			region:[],
			regionName:""
		}

		this.testy = this.testyield()
	}

	componentWillMount(){
		this.props.tochangeNav({title:"公司信息"})
	    // this.props.getServiceinfo( this.props.loginStatus.user.servicerCode )
	    // this.props.getArea()
	    // this.props.getProvince()
	    // for ( var v of this.testyield() ){
	    // 	console.log(v)
	    // }
	}

	componentWillReceiveProps( nextProps ){
		this.testy.next()
	}

	*testyield(){
		//yield this.props.getServiceinfo( this.props.loginStatus.user.servicerCode )
		yield this.props.getArea()
		yield this.props.getProvince()
		yield this.props.getRegion( this.props.servicerInfo.city )
		yield this.props.getCity( this.props.servicerInfo.province )
	}

	render(){
		const { servicerInfo,locationInfo,modifyServicer,getCity,
			getRegion,cancelLocation,getServiceinfo } = this.props
		// console.log(this.testy.next())
		return(
			<div className='companyInfo'>
				<List renderHeader={() => ''}>
					<Item arrow="empty"
						extra={ <img 
									src={ servicerInfo.servicerLogo }
									style={{ width:"100px",height:"100px" }}
								/> }
					>
			          公司图片
			        </Item>
				</List>
				<List renderHeader={() => '账号信息'}>
					<Item arrow="horizontal"
						extra={ servicerInfo.servicerName }
						onClick={ () => {
							hhistory.push( '/modifyDetail/companyname' )
						} }
					>
			          公司名称
			        </Item>
			        <Picker
				          data={[
							  locationInfo.area
							]}
				          title="选择大区"
				          cascade={false}
				          extra={ servicerInfo.areaName }
				          value={ servicerInfo.area && locationInfo.area.length !== 0 
				          	? [ servicerInfo.area ] : [] }
				          onChange={
				          	v => {
				          		modifyServicer( servicerInfo.servicerCode , { area:v[0] } )	
				          	} 
				          }
				    >
				        <Item arrow="down">
				          所属区域
				        </Item>
			        </Picker>

			        <Picker
				          data={[
							  locationInfo.province
							]}
				          title="选择省份"
				          cascade={false}
				          extra={ servicerInfo.provinceName }
				          value={ servicerInfo.province && locationInfo.province.length !== 0 
				          	? [ servicerInfo.province ] : [] }
				          onChange={
				          	v => {
				          		modifyServicer( servicerInfo.servicerCode , { province:v[0] } )
				          		getCity( v[0] )
				          		this.setState( { city:[] } )
				          	} 
				          }
				    >
				        <Item arrow="down">
				          所属省份
				        </Item>
			        </Picker>
			        
			        <Picker
				          data={[
							  locationInfo.city
							]}
				          title="选择城市"
				          cascade={false}
				          extra={ this.state.cityName === "" ? servicerInfo.cityName : this.state.cityName }
				          value={ this.state.city }
				          onChange={
				          	v => {
				          		modifyServicer( servicerInfo.servicerCode , { city:v[0] } )
				          		getRegion( v[0] )
				          	} 
				          }
				    >
				        <Item arrow="down" onClick={ () => {
							//this.props.getCity( this.props.servicerInfo.province )
						} }>
				          所属城市
				        </Item>
			        </Picker>

			        <Picker
				          data={[
							  locationInfo.region
							]}
				          title="选择行政区"
				          cascade={false}
				          extra={ this.state.regionName === "" ? servicerInfo.regionName : this.state.regionName }
				          value={ this.state.region }
				          onChange={
				          	v => {
				          		modifyServicer( servicerInfo.servicerCode , { region:v[0] } )
				          	} 
				          }
				    >
				        <Item arrow="down" onClick={ () => {
							// this.props.getRegion( this.props.servicerInfo.city )
						} }>
				          所属行政区
				        </Item>
			        </Picker>

			        <Item arrow="horizontal"
						onClick={ () => {
							hhistory.push( '/modifyDetail/address' )
						} }
						extra={ servicerInfo.address }
					>
			          街道地址
			        </Item>
				</List>

				<List renderHeader={() => '联系人'}>
					<Item arrow="empty"
						extra={ servicerInfo.fullname }
						onClick={ () => {
							//hhistory.push( '/modifyDetail/contactname' )
						} }
					>
			          名称
			        </Item>
			        <Item arrow="empty"
						extra={ servicerInfo.mobile }
						onClick={ () => {
							//hhistory.push( '/modifyDetail/servicermobi' )
						} }
					>
			          手机号
			        </Item>
			        <Item arrow="empty"
						extra={ servicerInfo.email }
						onClick={ () => {
							//hhistory.push( '/modifyDetail/serviceremail' )
						} }
					>
			          邮箱
			        </Item>
				</List>
			</div>
		)
	}

	shengshiqu = []

}

const mapStateToProps = ( state ) => ({
	 loginStatus:state.loginStatus,
	 servicerInfo:state.servicerInfo,
	 locationInfo:state.locationInfo
})

const mapDispatchToProps = (dispatch) => ({
	tochangeNav:navobj => dispatch( changeNav( navobj ) ),
	getServiceinfo:code => dispatch( getServiceinfo( code ) ),
	getArea:() => dispatch( getArea()),
	getProvince:() => dispatch( getProvince()),
	modifyServicer:( code,data ) => dispatch( modifyServicer( code,data ) ),
	getCity:code => dispatch( getCity(code) ),
	getRegion:code => dispatch( getRegion(code))
})

export default connect( mapStateToProps,mapDispatchToProps )( CompanyInfo )